<template>
  <div class="user-table-container">
    <el-button size="mini" type="primary" @click="handleadd()">
      新增
    </el-button>
    <el-table ref="tableRef" :data="result.roles" tooltip-effect="dark"
      style="width: 100%; max-width: 1000px; margin: 0 auto;" border highlight-current-row>
      <el-table-column label="ID"  sortable>
        <template #default="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="角色名">
        <template #default="scope">{{ scope.row.roleName }}</template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template #default="scope">
          <div class="flex justify-center space-x-1">
            <el-button size="mini" type="primary" class="btn-edit smaller-btn"
              @click="handleEditRole(scope.$index, scope.row)">
              <i class="el-icon-edit"></i> <span class="btn-text">编辑</span>
            </el-button>
            <el-button size="mini" type="warning" class="btn-assign smaller-btn"
              @click="handleAssignMenus(scope.$index, scope.row)">
              <i class="el-icon-s-custom"></i> <span class="btn-text">分配权限</span>
            </el-button>
            <el-button size="mini" type="danger" class="btn-delete smaller-btn"
              @click="handleDeleteRole(scope.$index, scope.row)">
              <i class="el-icon-delete"></i> <span class="btn-text">删除</span>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Roleaddedit ref="roleaddedit" :addVisible="addVisible" :title="title" @closeDialog="closeDialog"></Roleaddedit>
    <AssignMenu ref="assignMenu" :menubarnuVisible="menubarnuVisible" @closeDialog="closeDialog"></AssignMenu>
  </div>

</template>

<script>
import { rolesApi, delRoleApi } from '@/api/RoleApi';
import Roleaddedit from '@/components/role/Roleaddedit.vue';
import AssignMenu from '@/components/role/AssignMenu.vue';

export default {
  data() {
    return {
      result: {
        roles: [],
      },
      addVisible: false,
      menubarnuVisible: false,
      title: ''
    }
  },
  components: {
    Roleaddedit,
    AssignMenu
  },
  mounted() {
    this.lodeRoleS();
  },
  methods: {
    async lodeRoleS() {
      try {
        const res = await rolesApi();
        if (res.status === 200) {
          this.result.roles = res.data;
        } else {
          this.$message.error(res.msg);
        }
      } catch (error) {
        console.error('获取用户列表失败:', error);
        this.$message.error('网络错误，请稍后重试');
      }
    },

    // 操作方法
    closeDialog(isReflush = false) {
      this.addVisible = false;
      this.menubarnuVisible = false;
      isReflush && this.lodeRoleS();
    },
    handleadd() {
      this.addVisible = true;
      this.title = '新增角色';
      this.$refs.roleaddedit.openDialog();

    },
    handleEditRole(index, row) {
      console.log('编辑角色:', row);
      this.addVisible = true;
      this.title = '编辑角色';
      this.$refs.roleaddedit.openDialog(row.id);


    },

    handleAssignMenus(index, row) {
      this.menubarnuVisible = true;
      this.$refs.assignMenu.openDialog(row.id);

    },

    handleDeleteRole(index, row) {
      this.$confirm('确定要删除此用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await delRoleApi(row.id);
          if (res.status === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

          } else {
            this.$message.error(res.msg);
          }
        } catch (error) {
          console.error('获取用户列表失败:', error);
          this.$message.error('网络错误，请稍后重试');
        }


        this.lodeRoleS(); // 刷新数据
      }).catch(() => {
        // 取消操作
      });
    }
  }
}
</script>

<style scoped lang="less">
.user-table-container {
  // 表格容器样式

  .pagination-container {
    // 分页容器样式
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 0 0 4px 4px;
  }

  // 优化表格样式
  .el-table {
    &__header th {
      background-color: #f5f7fa;
      color: #606266;
      font-weight: 600;
    }

    &__row {
      transition: all 0.2s ease;

      &:hover {
        background-color: #fafbfc !important;
      }
    }

    // 隐藏水平滚动条
    &__body-wrapper {
      overflow-x: hidden;
    }
  }

  // 按钮样式优化
  .btn-edit {
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    }
  }

  .btn-assign {
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    }
  }

  .btn-delete {
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    }
  }

  // 按钮组样式
  .flex {
    display: flex;
  }

  .justify-center {
    justify-content: center;
  }

  .space-x-1 {
    gap: 4px;
  }

  // 新增按钮变小样式
  .smaller-btn {
    padding: 2px 4px;
    font-size: 10px;
  }

  // 调整按钮文字样式，进一步缩小字体
  .btn-text {
    font-size: 9px;
  }
}
</style>